<template>
  <div class="main-div">
    <div class="search-div">

    </div>
    <div class="content-div">
        <div class="label-text">上传文件:</div>
        <a href="javascript:;" class="ui-upload">
          <input ref="fileInput" type="file"
                 @change="fileChangeClick($event)"
                 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                 application/vnd.ms-excel"/>
          {{fileName?fileName:'选择文件'}}
        </a>
        <el-button style="margin: 0 0 0 20px;"
                   type="magicGreen"
                   size="mini"
                   @click="upload">确认</el-button>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import {getToken} from "@/utils/auth";

  export default {
    name: 'CircuitView',
    data() {
      return {
        fileName:'',
        file:'',
        saveObject: {},
      }
    },
    methods: {
      async loadData() {

      },
      fileChangeClick(e) {
        this.file = e.target.files[0];
        if(this.file){
          this.fileName = this.file.name;
        }else{
          this.fileName = '';
        }
      },
      upload(){
        let that = this;
        if(!that.file){
          that.$message.warning("请选择文件")
          return
        }
        let params = new FormData();
        params.append('file', this.file);
        const config = {headers: {'Content-Type': 'multipart/form-data','Authorization' : getToken()}};
        let url = process.env.BASE_URL+"/file/upload";
        that.$loading();
        axios.post(url, params, config).then(res => {
          setTimeout(function () {
            that.$loading().close();
          },100);
          that.$message.success("导入成功");
        }).catch(error => {
          that.$message.error("上传异常:"+error);
          that.$loading().close();
        })
      }
    }
  }
</script>

<style scoped>

  /deep/ .el-scrollbar__wrap {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .main-div {
    padding: 20px 20px;
  }

  .circuit-name > span {
    color: #1396f8;
    font-weight: normal;
  }
  .content-div{
    padding: 20px 10px ;
    display: flex;
  }
  .label-text{
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
  }

  .ui-upload {
    font-size: 14px;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: relative;
    cursor: pointer;
    color: #fff;
    background: #9aaba4;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
  }

  .ui-upload input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
  }

</style>
